<template>
    <div class="toilet-manage">
        <div class="left-block">
            <div class="diy-select">
                <img class="fl" src="@/assets/images/icon-pos.png" alt="" />
                <span class="select-word">金华XX商城</span>
                <span class="icon-arraw"></span>
            </div>
            <div class="toilt-pic">
                <img src="@/assets/images/icon-fangz.png" alt="">
            </div>
            <div class="floor-list">
                <div class="floor-item active">
                    <span class="word">金华XX商城1层</span>    
                </div> 
                <div class="floor-item">
                    <span class="word">金华XX商城1层</span>    
                </div> 
            </div>
        </div>
        <div class="center-block">
            <div class="use-count-box">
                <div class="use-count">
                    <img src="@/assets/images/icon-renshu.png" alt="">
                    <p class="num">3587</p>
                    <p class="name">当前累计使用人数</p>
                </div>
                <div class="use-detail">
                    <div class="title">当前空间闲散数</div>
                    <div class="detail-list">
                        <div class="detail-item">
                            <p class="num">17</p>
                            <p class="f20">男厕</p>
                        </div>
                        <div class="detail-item">
                            <p class="num">17</p>
                            <p class="f20">女厕</p>
                        </div>
                        <div class="detail-item">
                            <p class="num">17</p>
                            <p class="f20">无障碍</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="toilet-detail">
                <div class="status-tip clearfix">
                    <div class="fl status-item status1">无人使用</div>
                    <div class="fl status-item status2">有人使用</div>
                    <div class="fl status-item status3">正在维修</div>
                </div>
                <div class="toilet-data-box man">
                    <div class="top-line">
                        <div class="item" v-for="i in 3" :key="i">
                            <img src="@/assets/images/icon-dunce.png" alt="">
                        </div>
                        <div class="item" v-for="i in 5" :key="i">
                            <img src="@/assets/images/icon-dunce-dk.png" alt="">
                        </div>
                        <div class="item status2">
                           <img src="@/assets/images/icon-dunce-dk.png" alt=""> <img src="" alt="">
                        </div>
                        <div class="item no-zai" v-for="i in 2" :key="i">
                            <img src="@/assets/images/icon-wza.png" alt="">
                            <p class="word">无障碍</p>
                        </div>
                    </div>
                    <div class="bottom-line">
                        <div class="item" v-for="i in 9" :key="i">
                            <img src="@/assets/images/icon-xbc.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="toilet-data-box woman">
                    <div class="top-line">
                        <div class="item" v-for="i in 3" :key="i">
                            <img src="@/assets/images/icon-dunce.png" alt="">
                        </div>
                        <div class="item status3">
                            <img src="@/assets/images/icon-weixiu.png" alt="">
                        </div>
                        <div class="item" v-for="i in 5" :key="i">
                            <img src="@/assets/images/icon-dunce-dk.png" alt="">
                        </div>
                        <div class="item no-zai" v-for="i in 2" :key="i">
                            <img src="@/assets/images/icon-wza.png" alt="">
                            <p class="word">无障碍</p>
                        </div>
                    </div>
                    <div class="bottom-line">
                        <div class="item" v-for="i in 3" :key="i">
                            <img src="@/assets/images/icon-dunce.png" alt="">
                        </div>
                        <div class="item" v-for="i in 6" :key="i">
                            <img src="@/assets/images/icon-dunce-dk.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-block">
            <div class="count-box">
                <div class="num-line">
                    <span class="num">160</span>
                    <span class="unit">ug/m3</span>
                </div>
                <div class="word">室内空气检测</div>
            </div>
            <div class="tag-list clearfix">
                <div class="tag-item tag1 fl">
                    <div class="count-line">
                        <span class="num f24">31</span>
                        <span class="unit f18">ug/m3</span>
                    </div>
                    <div class="name f18">pm10</div>
                </div>
                <div class="tag-item tag2 fl">
                    <div class="count-line">
                        <span class="num f24">31</span>
                        <span class="unit f18">ug/m3</span>
                    </div>
                    <div class="name f18">甲醛</div>
                </div>
                <div class="tag-item tag3 fl">
                    <div class="count-line">
                        <span class="num f24">28</span>
                        <span class="unit f18"></span>
                    </div>
                    <div class="name f18">温度</div>
                </div>
                <div class="tag-item tag4 fl">
                    <div class="count-line">
                        <span class="num f24">28</span>
                        <span class="unit f18">%</span>
                    </div>
                    <div class="name f18">湿度</div>
                </div>
                <div class="tag-item tag5 fl">
                    <div class="count-line">
                        <span class="num f24">31</span>
                        <span class="unit f18">%</span>
                    </div>
                    <div class="name f18">TVOC</div>
                </div>
                <div class="tag-item tag6 fl">
                    <div class="count-line">
                        <span class="num f24">31</span>
                        <span class="unit f18">%</span>
                    </div>
                    <div class="name f18">CO2</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped></style>
